<template>
	<div id="app">
		<el-container>
			<el-header>
				<div class="home-top">管理中心</div>
			</el-header>
			<el-container>
				<el-aside>
					<el-menu
						default-active="1-1"
						class="el-menu-vertical-demo"
						@open="handleOpen"
						@close="handleClose"
						background-color="#292929"
						text-color="#fff"
						active-text-color="#ffd04b"
					>
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-location"></i>
								<span>治安子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/">
									<el-menu-item index="1-1">API列表
									</el-menu-item
									>
								</router-link>
								<router-link tag="li" to="/HomeNumber">
									<el-menu-item index="1-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>信访维稳子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/About">
									<el-menu-item index="2-1">API列表
									</el-menu-item
									>
								</router-link>
								<router-link tag="li" to="/AboutNumber">
									<el-menu-item index="2-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-document"></i>
								<span>环卫子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/Assanation">
									<el-menu-item index="3-1">API列表
									</el-menu-item
									>
								</router-link>
								<router-link tag="li" to="/AssanationNumber">
									<el-menu-item index="3-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-share"></i>
								<span>污水排水子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/Sewage">
									<el-menu-item index="4-1">API列表
									</el-menu-item
									>
								</router-link>
								<router-link tag="li" to="/SewageNumber">
									<el-menu-item index="4-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-upload"></i>
								<span>防汛子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/FloodControl">
									<el-menu-item index="5-1">API列表
									</el-menu-item
									>
								</router-link>
								<router-link tag="li" to="/FloodControlNumber">
									<el-menu-item index="5-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="6">
							<template slot="title">
								<i class="el-icon-date"></i>
								<span>安监子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/anjian_table">
									<el-menu-item index="6-1">API列表</el-menu-item>
								</router-link>
								<router-link tag="li" to="/anjian_chart">
									<el-menu-item index="6-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="7">
							<template slot="title">
								<i class="el-icon-s-data"></i>
								<span>环保子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/huanbao_table">
									<el-menu-item index="7-1">API列表</el-menu-item>
								</router-link>
								<router-link tag="li" to="/huanbao_chart">
									<el-menu-item index="7-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="8">
							<template slot="title">
								<i class="el-icon-s-help"></i>
								<span>城管子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/chengguan_table">
									<el-menu-item index="8-1">API列表</el-menu-item>
								</router-link>
								<router-link tag="li" to="/chengguan_chart">
									<el-menu-item index="8-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="9">
							<template slot="title">
								<i class="el-icon-s-flag"></i>
								<span>消防子系统</span>
							</template>
							<el-menu-item-group>
								<router-link tag="li" to="/xiaofang_table">
									<el-menu-item index="9-1">API列表</el-menu-item>
								</router-link>
								<router-link tag="li" to="/xiaofang_chart">
									<el-menu-item index="9-2">数据展示</el-menu-item>
								</router-link>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view/>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	export default {
		name: "Home",
		data() {
			return {};
		},
		created() {
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
		},
	};
</script>
<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	#app {
		width: 100%;
		height: 100vh;
	}
	h5{
		font-size: 30px;
		border: 0px !important;
	}
	h5:before {
				content: "";
				width: 5px;
				height: 1em;
				position: relative;
				top: .15em;
				display: inline-block;
				background: #ffc107;
				margin-right: 8px;
			}

	/*-------------------------滚动条*/
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 100px;
		background: #b6c2d2;
	}

	.home-top {
		width: 100%;
		height: 60px;
		box-sizing: border-box;
		padding: 0 30px;
		background-color: #292929;
		color: #fff;
		font-size: 18px;
		display: flex;
		align-items: center;
	}
	.el-container.is-vertical {
		height: 100%;
	}
	// 菜单
	.el-aside {
		position: fixed;
		top: 60px;
		bottom: 0;
		left: 0;
		width: 260px!important;
		overflow: auto;
	}



	.el-menu{
		min-height: 100%;

		.el-menu-item-group__title{
			display: none;
		}
		.el-menu-item{
			padding-left:50px !important;
		}
		.el-submenu .el-menu-item{
			background: rgba(0,0,0,.4) !important;
		}
		.el-submenu .el-menu-item:hover{
			background: rgba(0,0,0,.5) !important;
		}

	}


	.el-header {
		padding: 0 !important;
	}
	.el-main{
		position: fixed;
		top: 60px;
		bottom: 0;
		left: 260px;
		right: 0;
		overflow: auto;
	}
</style>

<style lang="scss">
	main.zj.gridPanel {
		display: flex;
		flex-wrap: wrap;

		*{
			box-sizing: border-box;
		}

		.chartBox {
			width: 100%;
			padding: 20px 20px 60px;

			h2 {
				padding-bottom: 20px;
				color: #333;
			}

			h2:before {
				content: "";
				width: 5px;
				height: 1em;
				position: relative;
				top: .15em;
				display: inline-block;
				background: #ffc107;
				margin-right: 8px;
			}


			.chart {
				height: 30vh;
			}


		}
		.w2 {
			width: 50%;
		}

		.w3 {
			width: 33.33%;
		}
	}
</style>

